<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-form :inline="true" :model="searchForm" class="sceneSearch">
          <el-form-item label="场景名称:">
            <el-input
              v-model="searchForm.sceneName"
              placeholder="场景名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="场景类型:">
            <el-select
              v-model="searchForm.sceneType"
              clearable
              placeholder="场景类型"
            >
              <el-option label="注册" value="1"></el-option>
              <el-option label="登录" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch(searchForm)"
              >搜索</el-button
            >
            <el-button type="primary" @click="onAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table
          :data="tableData"
          style="width: 100%"
          height="500"
          border
          stripe
          highlight-current-row
        >
          <el-table-column prop="id" label="标识" width="100" />
          <el-table-column prop="name" label="场景名" width="120" />
          <el-table-column prop="typeName" label="场景类型" width="120" />
          <el-table-column prop="jarPath" label="jar包信息" width="200" />
          <!-- <el-table-column prop="dimension" label="场景维度" width="120" /> -->
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column prop="updateTime" label="更新时间" width="180" />
          <el-table-column fixed="right" label="操作" width="240">
            <template #default="scope">
              <el-button
                type="text"
                size="small"
                @click.prevent="getDimension(scope)"
              >
                维度信息
              </el-button>
              <el-button
                type="text"
                size="small"
                @click.prevent="deleteRow(scope)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>

  <el-dialog v-model="dialogFormVisible" title="新增场景">
    <el-form :model="addForm" class="addSceneInfo">
      <el-form-item label="场景名:" :label-width="formLabelWidth">
        <el-input v-model="addForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="场景类型:" :label-width="formLabelWidth">
        <el-select v-model="addForm.type" placeholder="请选择一个场景类型">
          <el-option label="注册" value="1"></el-option>
          <el-option label="登录" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务包:" :label-width="formLabelWidth" prop="file">
        <el-upload
          class="upload-demo"
          :ref="addForm.jarFile"
          action=""
          drag
          :auto-upload="false"
          :limit="1"
          :on-change="onUploadChange"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">Please upload a jar package.</div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveScene(addForm)">保存</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog
    v-model="dialogFormVisible2"
    title="关联维度信息"
    @close="closeDimensionInfo"
  >
    <el-input v-model="dimensionInfo" :rows="2" type="textarea" />
  </el-dialog>
</template>

<script lang="ts">
import { reactive, ref } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import type { ElUpload } from "element-plus";
import { SceneManage } from "@/api/index";
import { ElMessage } from "element-plus";

export default {
  components: {
    UploadFilled,
  },
  setup() {
    let dialogFormVisible = ref(false);
    let dialogFormVisible2 = ref(false);
    const formLabelWidth = "140px";

    const addForm = reactive({
      name: "",
      type: "",
      jarFileInfo: File,
    });

    const searchForm = reactive({
      sceneName: "",
      sceneType: "",
    });

    const tableData = ref();

    const onSearch = () => {
      let searchCondition = {
        name: "",
        type: "",
      };

      searchCondition.name = searchForm.sceneName;
      searchCondition.type = searchForm.sceneType;

      SceneManage.getSceneInfo(searchCondition).then((response: any) => {
        if (response != undefined && response.status == 200) {
          const data: any = response.data;
          if (data.code != 0) {
            ElMessage.error(data.msg);
          } else {
            tableData.value = data.data;
          }
        } else {
          ElMessage.error("场景查询失败");
        }
      });
    };

    const onAdd = () => {
      dialogFormVisible.value = true;
    };

    const deleteRow = (scope: any) => {
      // 删除行
      SceneManage.delScene({ sceneId: scope.row.id }).then((response: any) => {
        if (response != undefined && response.status == 200) {
          const data: any = response.data;
          if (data.code != 0) {
            ElMessage.error(data.msg);
          } else {
            tableData.value.splice(scope.$index, 1);
          }
        } else {
          ElMessage.error("场景删除失败");
        }
      });
    };

    const jarUploadRef = ref<InstanceType<typeof ElUpload>>();

    const saveScene = (addForm: any) => {
      let fd = new window.FormData();
      fd.append("jarFileInfo", addForm.jarFileInfo.raw);
      fd.append("name", addForm.name);
      fd.append("type", addForm.type);

      SceneManage.addSceneInfo(fd).then((response: any) => {
        if (response != undefined && response.status == 200) {
          const data: any = response.data;
          if (data.code != 0) {
            ElMessage.error(data.msg);
          } else {
            ElMessage.info("场景添加成功");
            dialogFormVisible.value = false;
            onSearch();
          }
        } else {
          ElMessage.error("场景添加失败");
        }
      });
    };

    const jarFile = ref();
    const onUploadChange = (file: any, fileList: any) => {
      // jarFile.value = file;
      addForm.jarFileInfo = file;
    };

    const dimensionInfo = ref();
    const getDimension = (scope: any) => {
      SceneManage.getSceneDimInfo({ sceneId: scope.row.id }).then(
        (response: any) => {
          if (response != undefined && response.status == 200) {
            const data: any = response.data;
            if (data.code != 0) {
              ElMessage.error(data.msg);
            } else {
              // 遍历数组
              const dimensionLists: any = data.data;
              var dimensionStr:string[] = [];
              for (var i = 0; i < dimensionLists.length; i++) {
                console.log(dimensionLists[i]);
                dimensionStr.push(`${dimensionLists[i].chineseName}(${dimensionLists[i].engName})`);
              }

              dimensionInfo.value = dimensionStr.join(', ');
              dialogFormVisible2.value = true;
            }
          } else {
            ElMessage.error("场景维度获取失败");
          }
        }
      );
    };

    const closeDimensionInfo = () => {
      dialogFormVisible2.value = false;
    };

    // 初始加载执行
    onSearch();
    return {
      searchForm,
      addForm,
      formLabelWidth,
      tableData,
      dialogFormVisible,
      dialogFormVisible2,
      jarUploadRef,
      dimensionInfo,
      deleteRow,
      getDimension,
      onAdd,
      onSearch,
      saveScene,
      onUploadChange,
      closeDimensionInfo,
    };
  },
};
</script>

<style lang="postcss" scoped>
.addSceneInfo {
  position: inherit;
}

.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}

.sceneSearch {
  position: relative;
  left: 0px;
}

.common-layout .el-header {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.common-layout .el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  /* line-height: 5px; */
}

.common-layout > .el-container {
  /* margin-bottom: 40px; */
}
</style>
